import { useState } from 'react'
import ProgressBar from './conponents/ProgressBar/ProgressBar'

function App() {
  const [step,setStep]=useState(5);
  const [total,setTotal]=useState(12);
  const [showInfo,setShowInfo]=useState(true);
  const [color,setColor]=useState('yellow');

  const decline=()=>{
    let newStep=step-1;
    if(newStep<0){
      newStep=0;
    }
    setStep(newStep)
  }

  const increase=()=>{
    let newStep=step+1;
    if(newStep>total){
      newStep=total;
    }
    setStep(newStep)
  }

  return (
    <div className="App">
      <h2>ProgressBar Demo</h2>
      <div className="desc">
        {/* 理下需求
          组件设计
          父子组件的传递
        */}
        <ul>
          <b>@params</b>
          <li>step?:number=第几步（需要小于等于total）</li>
          <li>total?:number=完成共需多少（需要小于等于total）</li>
          <li>showInfo?:boll=是否需要显示百分比数字提示</li>
          <li>color:string=自定义进度条颜色</li>
        </ul>
        <div>
          <p>
            <button onClick={decline}>-</button>
            <button onClick={increase}>+</button>
            <label>step:</label>{step}
          </p>
        </div>
      </div>
      <ProgressBar 
        step={step}
        total={total}
        showInfo={showInfo}
        color={color}
      />
    </div>
  )
}

export default App
